<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<link type="text/css" href="css/style.css" rel="stylesheet" />
		<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
		<title>to：小杜</title>
		<style>
			* {
				box-sizing: border-box;
			}

			body {
				margin: 0;
				height: 100vh;
				overflow: hidden;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #161616;
				color: #c5a880;
				font-family: sans-serif;
			}

			label {
				display: inline-block;
				background-color: #161616;
				padding: 16px;
				border-radius: 0.3rem;
				cursor: pointer;
				margin-top: 1rem;
				width: 300px;
				border-radius: 10px;
				border: 1px solid #c5a880;
				text-align: center;
			}

			ul {
				list-style-type: none;
				padding: 0;
				margin: 0;
			}

			.btn {
				background-color: #161616;
				border-radius: 10px;
				color: #c5a880;
				border: 1px solid #c5a880;
				padding: 16px;
				width: 300px;
				margin-bottom: 16px;
				line-height: 1.5;
				cursor: pointer;
			}

			.separator {
				font-weight: bold;
				text-align: center;
				width: 300px;
				margin: 16px 0px;
				color: #a07676;
			}

			.title {
				color: #a07676;
				font-weight: bold;
				font-size: 3rem;
				margin-bottom: 16px;
			}

			.text-loading {
				font-size: 2rem;
			}

			.btn {
				background-color: transparent;
				border: none;
				font-size: 15rem;
				animation: shack 0.4s ease-in-out infinite;
			}

			@keyframes shack {
				0% {
					transform: rotate(0);
				}

				25% {
					transform: rotate(-10deg);
				}

				50% {
					transform: rotate(0);
				}

				75% {
					transform: rotate(10deg);
				}

				100% {
					transform: rotate(0);
				}
			}

			#labels,
			#extra {
				/* color: rgb(106, 17, 11); */
				color: #c5a880;
				font-weight: bold;
				font-size: 3.25rem;
				position: absolute;
				width: 100%;
				text-align: center;
				opacity: 0;
				transition: all 1s ease-in-out;
				z-index: -1;
				top: 20%;
			}

			#labels.hide {
				opacity: 0;
			}

			#labels.show,
			#extra.show {
				opacity: 1;
				z-index: 100;
			}
		</style>

		<script>
			window.console = window.console || function(t) {};
		</script>

		<script>
			if (document.location.search.match(/type=embed/gi)) {
				window.parent.postMessage("resize", "*");
			}
		</script>
	</head>
	<script src="js/jquery-3.2.1.min.js"></script>
	<script src="js/style.js"></script>

	<body translate="no">
		<div id="overlay">
			<ul>
				<li class="title">To 小杜同学：</li>
				<li>
					<button class="btn" id="btnA" type="button">
						<!-- Merry Christmas -->
						🎁
					</button>
				</li>
			</ul>
		</div>
		<!-- <div id="labels"></div> -->

		<!-- 树代码 -->
		<div class="tree" id="tree" style="display: none;">
			<div class="tree__light"
				style="--appear: 0; --y: 0; --rotate: 1440; --radius: 12.5; --speed: 6.400434662074517; --delay: -5.729518378221366;">
			</div>
			<div class="tree__light"
				style="--appear: 1; --y: 2; --rotate: 1411.2; --radius: 12.25; --speed: 8.289118880758405; --delay: -9.821339538073875;">
			</div>
			<div class="tree__light"
				style="--appear: 2; --y: 4; --rotate: 1382.4; --radius: 12; --speed: 2.762214438568402; --delay: -9.82553991641267;">
			</div>
			<div class="tree__light"
				style="--appear: 3; --y: 6; --rotate: 1353.6000000000001; --radius: 11.75; --speed: 5.2169599789222705; --delay: -1.146313414741591;">
			</div>
			<div class="tree__light"
				style="--appear: 4; --y: 8; --rotate: 1324.8; --radius: 11.5; --speed: 8.665042244953177; --delay: -2.232614726172797;">
			</div>
			<div class="tree__light"
				style="--appear: 5; --y: 10; --rotate: 1296; --radius: 11.25; --speed: 6.1841290939752; --delay: -3.2948672174559213;">
			</div>
			<div class="tree__light"
				style="--appear: 6; --y: 12; --rotate: 1267.2; --radius: 11; --speed: 0.2386221851841408; --delay: -0.1565400802638761;">
			</div>
			<div class="tree__light"
				style="--appear: 7; --y: 14; --rotate: 1238.4; --radius: 10.75; --speed: 3.4180669002414676; --delay: -1.108204498301666;">
			</div>
			<div class="tree__light"
				style="--appear: 8; --y: 16; --rotate: 1209.6000000000001; --radius: 10.5; --speed: 4.495713975214219; --delay: -7.16630082687522;">
			</div>
			<div class="tree__light"
				style="--appear: 9; --y: 18; --rotate: 1180.8; --radius: 10.25; --speed: 2.050188705878939; --delay: -8.897558901485858;">
			</div>
			<div class="tree__light"
				style="--appear: 10; --y: 20; --rotate: 1152; --radius: 10; --speed: 0.879341071588815; --delay: -1.372285887568998;">
			</div>
			<div class="tree__light"
				style="--appear: 11; --y: 22; --rotate: 1123.2; --radius: 9.75; --speed: 6.529368844448258; --delay: -5.810729343334522;">
			</div>
			<div class="tree__light"
				style="--appear: 12; --y: 24; --rotate: 1094.4; --radius: 9.5; --speed: 5.980504355359351; --delay: -8.0343744180381;">
			</div>
			<div class="tree__light"
				style="--appear: 13; --y: 26; --rotate: 1065.6000000000001; --radius: 9.25; --speed: 3.730059917047488; --delay: -6.6048171919530745;">
			</div>
			<div class="tree__light"
				style="--appear: 14; --y: 28; --rotate: 1036.8; --radius: 9; --speed: 8.447176433821193; --delay: -2.930795225206919;">
			</div>
			<div class="tree__light"
				style="--appear: 15; --y: 30; --rotate: 1008; --radius: 8.75; --speed: 2.8356860377165605; --delay: -4.288005150545953;">
			</div>
			<div class="tree__light"
				style="--appear: 16; --y: 32; --rotate: 979.2; --radius: 8.5; --speed: 4.901932888595965; --delay: -7.760337395934407;">
			</div>
			<div class="tree__light"
				style="--appear: 17; --y: 34; --rotate: 950.4; --radius: 8.25; --speed: 2.4410718943359044; --delay: -1.6426251216499121;">
			</div>
			<div class="tree__light"
				style="--appear: 18; --y: 36; --rotate: 921.6; --radius: 8; --speed: 2.0493973792725373; --delay: -9.01034351819967;">
			</div>
			<div class="tree__light"
				style="--appear: 19; --y: 38; --rotate: 892.8000000000001; --radius: 7.75; --speed: 4.090147886483462; --delay: -0.789389136081029;">
			</div>
			<div class="tree__light"
				style="--appear: 20; --y: 40; --rotate: 864; --radius: 7.5; --speed: 1.3590459446093006; --delay: -9.876738535965146;">
			</div>
			<div class="tree__light"
				style="--appear: 21; --y: 42; --rotate: 835.2; --radius: 7.25; --speed: 9.50349709646419; --delay: -0.2852392609827459;">
			</div>
			<div class="tree__light"
				style="--appear: 22; --y: 44; --rotate: 806.4; --radius: 7; --speed: 3.0721768487078704; --delay: -4.567820117936774;">
			</div>
			<div class="tree__light"
				style="--appear: 23; --y: 46; --rotate: 777.6; --radius: 6.75; --speed: 0.49456860352296017; --delay: -0.1164418214056262;">
			</div>
			<div class="tree__light"
				style="--appear: 24; --y: 48; --rotate: 748.8000000000001; --radius: 6.5; --speed: 4.655998318405867; --delay: -8.80328724436508;">
			</div>
			<div class="tree__light"
				style="--appear: 25; --y: 50; --rotate: 720; --radius: 6.25; --speed: 6.13195185823562; --delay: -7.575161141790594;">
			</div>
			<div class="tree__light"
				style="--appear: 26; --y: 52; --rotate: 691.2; --radius: 6; --speed: 4.358165499421438; --delay: -9.247144771643343;">
			</div>
			<div class="tree__light"
				style="--appear: 27; --y: 54; --rotate: 662.4; --radius: 5.75; --speed: 0.05097926779642714; --delay: -8.691745044020614;">
			</div>
			<div class="tree__light"
				style="--appear: 28; --y: 56; --rotate: 633.6; --radius: 5.5; --speed: 8.742641210620313; --delay: -6.5295280902741855;">
			</div>
			<div class="tree__light"
				style="--appear: 29; --y: 58; --rotate: 604.8000000000001; --radius: 5.25; --speed: 5.80185251364155; --delay: -7.609251669692513;">
			</div>
			<div class="tree__light"
				style="--appear: 30; --y: 60; --rotate: 576; --radius: 5; --speed: 7.467315091727784; --delay: -8.634544168186384;">
			</div>
			<div class="tree__light"
				style="--appear: 31; --y: 62; --rotate: 547.2; --radius: 4.75; --speed: 4.266345571182885; --delay: -5.264029758958855;">
			</div>
			<div class="tree__light"
				style="--appear: 32; --y: 64; --rotate: 518.4; --radius: 4.5; --speed: 9.045502005126004; --delay: -2.690996107144532;">
			</div>
			<div class="tree__light"
				style="--appear: 33; --y: 66; --rotate: 489.6; --radius: 4.25; --speed: 8.157526793190122; --delay: -7.994804794945352;">
			</div>
			<div class="tree__light"
				style="--appear: 34; --y: 68; --rotate: 460.8; --radius: 4; --speed: 9.713885657603182; --delay: -3.1004172346881154;">
			</div>
			<div class="tree__light"
				style="--appear: 35; --y: 70; --rotate: 432; --radius: 3.75; --speed: 2.4675983602710794; --delay: -6.147402437252795;">
			</div>
			<div class="tree__light"
				style="--appear: 36; --y: 72; --rotate: 403.2; --radius: 3.5; --speed: 6.334757806600053; --delay: -4.68726311130985;">
			</div>
			<div class="tree__light"
				style="--appear: 37; --y: 74; --rotate: 374.40000000000003; --radius: 3.25; --speed: 5.810077494998955; --delay: -0.5421184684789382;">
			</div>
			<div class="tree__light"
				style="--appear: 38; --y: 76; --rotate: 345.6; --radius: 3; --speed: 3.1348261661348698; --delay: -1.8762379030616438;">
			</div>
			<div class="tree__light"
				style="--appear: 39; --y: 78; --rotate: 316.8; --radius: 2.75; --speed: 1.7539981598254406; --delay: -0.39031038560793707;">
			</div>
			<div class="tree__light"
				style="--appear: 40; --y: 80; --rotate: 288; --radius: 2.5; --speed: 2.5539355188740087; --delay: -4.450657635233652;">
			</div>
			<div class="tree__light"
				style="--appear: 41; --y: 82; --rotate: 259.2; --radius: 2.25; --speed: 2.3603559140315844; --delay: -9.410370278145297;">
			</div>
			<div class="tree__light"
				style="--appear: 42; --y: 84; --rotate: 230.4; --radius: 2; --speed: 3.3112783371999055; --delay: -0.7523735956343902;">
			</div>
			<div class="tree__light"
				style="--appear: 43; --y: 86; --rotate: 201.6; --radius: 1.75; --speed: 1.7060416013304724; --delay: -9.109653019612438;">
			</div>
			<div class="tree__light"
				style="--appear: 44; --y: 88; --rotate: 172.8; --radius: 1.5; --speed: 6.344643090661945; --delay: -6.583050358454807;">
			</div>
			<div class="tree__light"
				style="--appear: 45; --y: 90; --rotate: 144; --radius: 1.25; --speed: 1.7389609219137059; --delay: -7.326224146231651;">
			</div>
			<div class="tree__light"
				style="--appear: 46; --y: 92; --rotate: 115.2; --radius: 1; --speed: 8.606030099788386; --delay: -1.8678573148711752;">
			</div>
			<div class="tree__light"
				style="--appear: 47; --y: 94; --rotate: 86.4; --radius: 0.75; --speed: 9.49674248980797; --delay: -3.592334423342276;">
			</div>
			<div class="tree__light"
				style="--appear: 48; --y: 96; --rotate: 57.6; --radius: 0.5; --speed: 0.6238837869676761; --delay: -9.031351447299665;">
			</div>
			<div class="tree__light"
				style="--appear: 49; --y: 98; --rotate: 28.8; --radius: 0.25; --speed: 0.25891891876878903; --delay: -3.4291538146903444;">
			</div>
			<svg class="tree__star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113.32 108.44" style="--delay: 50">
				<path
					d="M90.19 104.33L57.12 87.38 24.4 105l5.91-36.69L3.44 42.65l36.72-5.72 16.1-33.5L73.06 36.6l36.83 4.97-26.35 26.21z"
					fill="none" stroke-width="6.88" stroke-linecap="round" stroke-linejoin="round"></path>
			</svg>
		</div>

		<script>
			// 💗 ‼️ ‼️ 想要说的话在这里 💗
			const my_labels = [
				"小杜同学",
				// "Merry Christmas",
				"健健康康，平安喜乐",
				"你只管做自己认为正确的事，做你真正喜欢的事",
				"要成为一个闪闪发光的人呀~",
				// "DangDangDang 万众瞩目的圣诞树要来咯~",
			];

			const buttons = document.querySelectorAll(".btn");
			buttons.forEach((button, index) =>
				button.addEventListener("click", () => loadAudio(index))
			);


			function loadAudio(i) {
				document.getElementById("overlay").innerHTML =
					'<div class="text-loading"><h1>加载中,猜猜接下来会发生什么 ...</h1></div>';

				// $("#overlay").typewriter();

				setTimeout(function() {
					$("#overlay").html("");

					my_labels.forEach(function(value, index) {
						const span = $('<div class="text-loading"><h2></h2></div><br>');
						span.text(value);
						setTimeout(function() {
							$("#overlay").append(span);
							span.typewriter();
							$("#tree").css("display", "");
						}, (index + 1) * 1500);
					})
				}, 2000);

				// $('#overlay').each(function(index) {
				// 	const $ele = $(this);
				// 	const span = $('<span></span>');
				// 	span.text(my_labels[index]);
				// 	$ele.append(span);
				// 	span.typewriter();
				// });

				// my_labels.forEach(function(value, index) {
				// 	setTimeout(function() {
				// 		let p = document.createElement("p");
				// 		p.textContent = value;
				// 		$("#overlay").append(p);
				// 	}, index * 2000); // 每个标签之间添加2秒的延迟
				// });

				// setTimeout(function() {
				// 	// 在定时器的回调函数中将div的display属性设置为"block"
				// 	$("#tree").css("display", "");
				// }, 3000);
			}



			$.fn.typewriter = function() {
				this.each(function() {
					var $ele = $(this),
						str = $ele.html(),
						sum = 0;
					$ele.html("");
					var timer = setInterval(function() {
						var current = str.substr(sum, 1);
						if (current == '<') {
							sum = str.indexOf('>', sum) + 1;
						} else {
							sum++;
						}
						var curr = str.substr(0, sum);
						$ele.html(curr + (sum & 1 ? '_' : ''));
						if (sum >= str.length) {
							clearInterval(timer);
						}
					}, 50);
				});
				return this;
			};
		</script>
		<script type="text/javascript">
			/* 控制下雪 */
			function snowFall(snow) {
				/* 可配置属性 */
				snow = snow || {};
				this.maxFlake = snow.maxFlake || 200;   /* 最多片数 */
				this.flakeSize = snow.flakeSize || 10;  /* 雪花形状 */
				this.fallSpeed = snow.fallSpeed || 1;   /* 坠落速度 */
			}
			/* 兼容写法 */
			requestAnimationFrame = window.requestAnimationFrame ||
				window.mozRequestAnimationFrame ||
				window.webkitRequestAnimationFrame ||
				window.msRequestAnimationFrame ||
				window.oRequestAnimationFrame ||
				function(callback) { setTimeout(callback, 1000 / 60); };
		 
			cancelAnimationFrame = window.cancelAnimationFrame ||
				window.mozCancelAnimationFrame ||
				window.webkitCancelAnimationFrame ||
				window.msCancelAnimationFrame ||
				window.oCancelAnimationFrame;
			/* 开始下雪 */
			snowFall.prototype.start = function(){
				/* 创建画布 */
				snowCanvas.apply(this);
				/* 创建雪花形状 */
				createFlakes.apply(this);
				/* 画雪 */
				drawSnow.apply(this)
			}
			/* 创建画布 */
			function snowCanvas() {
				/* 添加Dom结点 */
				var snowcanvas = document.createElement("canvas");
				snowcanvas.id = "snowfall";
				snowcanvas.width = window.innerWidth;
				snowcanvas.height = document.body.clientHeight;
				snowcanvas.setAttribute("style", "position:absolute; top: 0; left: 0; z-index: 1; pointer-events: none;");
				document.getElementsByTagName("body")[0].appendChild(snowcanvas);
				this.canvas = snowcanvas;
				this.ctx = snowcanvas.getContext("2d");
				/* 窗口大小改变的处理 */
				window.onresize = function() {
					snowcanvas.width = window.innerWidth;
					/* snowcanvas.height = window.innerHeight */
				}
			}
			/* 雪运动对象 */
			function flakeMove(canvasWidth, canvasHeight, flakeSize, fallSpeed) {
				this.x = Math.floor(Math.random() * canvasWidth);   /* x坐标 */
				this.y = Math.floor(Math.random() * canvasHeight);  /* y坐标 */
				this.size = Math.random() * flakeSize + 2;          /* 形状 */
				this.maxSize = flakeSize;                           /* 最大形状 */
				this.speed = Math.random() * 1 + fallSpeed;         /* 坠落速度 */
				this.fallSpeed = fallSpeed;                         /* 坠落速度 */
				this.velY = this.speed;                             /* Y方向速度 */
				this.velX = 0;                                      /* X方向速度 */
				this.stepSize = Math.random() / 30;                 /* 步长 */
				this.step = 0                                       /* 步数 */
			}
			flakeMove.prototype.update = function() {
				var x = this.x,
					y = this.y;
				/* 左右摆动(余弦) */
				this.velX *= 0.98;
				if (this.velY <= this.speed) {
					this.velY = this.speed
				}
				this.velX += Math.cos(this.step += .05) * this.stepSize;
		 
				this.y += this.velY;
				this.x += this.velX;
				/* 飞出边界的处理 */
				if (this.x >= canvas.width || this.x <= 0 || this.y >= canvas.height || this.y <= 0) {
					this.reset(canvas.width, canvas.height)
				}
			};
			/* 飞出边界-放置最顶端继续坠落 */
			flakeMove.prototype.reset = function(width, height) {
				this.x = Math.floor(Math.random() * width);
				this.y = 0;
				this.size = Math.random() * this.maxSize + 2;
				this.speed = Math.random() * 1 + this.fallSpeed;
				this.velY = this.speed;
				this.velX = 0;
			};
			// 渲染雪花-随机形状（此处可修改雪花颜色！！！）
			flakeMove.prototype.render = function(ctx) {
				var snowFlake = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size);
				snowFlake.addColorStop(0, "rgba(255, 255, 255, 0.9)");  /* 此处是雪花颜色，默认是白色 */
				snowFlake.addColorStop(.5, "rgba(255, 255, 255, 0.5)"); /* 若要改为其他颜色，请自行查 */
				snowFlake.addColorStop(1, "rgba(255, 255, 255, 0)");    /* 找16进制的RGB 颜色代码。 */
				ctx.save();
				ctx.fillStyle = snowFlake;
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
				ctx.fill();
				ctx.restore();
			};
			/* 创建雪花-定义形状 */
			function createFlakes() {
				var maxFlake = this.maxFlake,
					flakes = this.flakes = [],
					canvas = this.canvas;
				for (var i = 0; i < maxFlake; i++) {
					flakes.push(new flakeMove(canvas.width, canvas.height, this.flakeSize, this.fallSpeed))
				}
			}
			/* 画雪 */
			function drawSnow() {
				var maxFlake = this.maxFlake,
					flakes = this.flakes;
				ctx = this.ctx, canvas = this.canvas, that = this;
				/* 清空雪花 */
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				for (var e = 0; e < maxFlake; e++) {
					flakes[e].update();
					flakes[e].render(ctx);
				}
				/*  一帧一帧的画 */
				this.loop = requestAnimationFrame(function() {
					drawSnow.apply(that);
				});
			}
			/* 调用及控制方法 */
			var snow = new snowFall({maxFlake:60});
			snow.start();
		</script>
	</body>
</html>